@use "sass:map";
@use "sass:math";
@use "sass:string";
@import "./function.scss";
@import "./extend.scss";
@import "./mixin.scss";
@for $i from 0 to 101 {
    .w-#{$i}-p {
        width: percentage(math.div($i,100));
    }
    .h-#{$i}-p {
        height: percentage(math.div($i,100));
    }
    .min-w-#{$i}-vw {
        min-width: $i + vw;
    }
    .w-#{$i}-vw {
        width: $i + vw;
    }
    .h-#{$i}-vh {
        height: $i + vh;
    }
    .min-h-#{$i}-vh {
        min-height: $i + vh;
    }
    .max-w-#{$i}-vw {
        max-width: $i + vw;
    } 
    .max-h-#{$i}-vh {
        max-height: $i + vh;
    }
    .fs-#{$i}{
        font-size: $i + px;
    }    
}
@for $i from 0 to 101 {
    .m-#{$i} {
        @if $i == 0 {
            #{$margin}:$i;
        }@else {
            #{$margin}:$i + px;
        }
    }
    .h-point-#{$i}-em {
        height: math.div($i,10) + em;
    }
    .h-#{$i}-em {
        height: $i + em;
    }
    .p-#{$i} {
        @if $i == 0 {
            #{$padding}:$i;
        }@else {
            #{$padding}:$i + px;
        }
    }
    .lh-#{$i} {
        line-height: $i + px;
    }
    .w-#{$i} {
        width:$i + px;
    }
    .min-w-#{$i} {
        min-width: $i + px;
    } 
    .min-h-#{$i} {
        min-height: $i + px;
    }
    .zi-#{$i} {
        z-index: $i;
    }
    .bd-#{$i} {
        border-width: $i + px;
    }
    @each $dir in $direction {
        $first:propSlice($dir,1,1);
        .m#{$first}-#{$i} {
            @if $i == 0 {
                #{$margin + '-' + $dir }:$i;
            }@else {
                #{$margin + '-' + $dir }:$i + px;
            }
        }
        .p#{$first}-#{$i} {
            @if $i == 0 {
                #{$padding + '-' + $dir }:$i;
            }@else {
                #{$padding + '-' + $dir }:$i + px;
            }
        }
    }
    /*
    * 四个方向上的偏移
    */
    @each $value in $direction {
        .el-#{$value}-#{$i} {
            #{$value}: $i + px;
        }
        $sel:propSlice($value,1,1);
        .bd#{$sel}-#{$i} {
            border-#{$value}-width: $i + px;
        }
        .el-#{$value}-#{$i}-em {
            #{$value}: $i + em;
        }
        .el-#{$value}-point-#{$i}-em {
            #{$value}: math.div($i,10) + em;
        }
    }
}
